<template>
    <view class="">
        <view class="heard">
            <view class="item ls-f-ajsb"
                  @click="showSchool = true">
                <view class="f-32">学校</view>
                <view class="ls-f-ac">
                    <text class="f-32-g">{{ school || '请选择' }}</text>
                    <u-icon name="arrow-right"
                            color="#999"></u-icon>
                </view>
            </view>
            <view class="hr"></view>
            <view class="item ls-f-ajsb"
                  @click="showCourse = true">
                <view class="f-32">学科</view>
                <view class="ls-f-ac">
                    <text class="f-32-g">{{ course || '请选择' }}</text>
                    <u-icon name="arrow-right"
                            color="#999"></u-icon>
                </view>
            </view>
        </view>
        <view class="tab">
            <u-tabs :list="tabs"
                    name="name"
                    item-width="350"
                    paddingRight="50rpx"
                    :current="currentIndex"
                    @change="sel"
                    height="80"
                    font-size="32"
                    bar-width="64"
                    gutter="44"
                    bg-color=" #f3f3f3"
                    inactive-color="#666666"
                    active-color="#63B9F2"></u-tabs>
        </view>
        <view class="info">{{ currentIndex == 0 ? '工作照片/视频' : '反馈信息' }}</view>
        <view class="list"
              v-if="currentIndex == 0">
            <!--  :style="{border:index==2?'none':''}" -->
            <view class="item"
                  v-for="(item, index) in list"
                  :key="index">
                <view class=" ls-f-ajsb">
                    <view class="titl">{{ item.text }}</view>
                    <view class="info2">{{ item.info }}</view>
                </view>
                <view class="ls-f-ac"
                      style="flex-wrap: wrap;">
                    <view class="upload ls-f-ac">
                        <view class="add ls-f-ajc"
                              @click="upload(index)"
                              v-if="item.images.length < item.count">+</view>
                    </view>
                    <view v-for="(data, idx) in item.images"
                          :key="idx"
                          class="mt-30">
                        <image src="../../../static/images/common_icon_delete@2x.png"
                               class="del"
                               @click="del(index, idx)"
                               mode=""></image>
                        <image class="img"
                               :src="data"
                               mode="aspectFill"></image>
                    </view>
                </view>
            </view>

            <view class="bottom ls-f-ajsb mt-30">
                <text style="font-size: 32rpx;">是否全勤</text>
                <!-- <u-switch v-model="allWork"></u-switch> -->

                <u-radio-group v-model="allWork">
                    <u-radio @change="radioChange"
                             v-for="(item, index) in rlist"
                             :key="index"
                             :name="item.disabled">{{ item.name }}</u-radio>
                </u-radio-group>
                <!-- <radio></radio> -->
            </view>
            <view class="mt-30"
                  style="font-size: 32rpx;"
                  v-if="!allWork">请选择缺勤学生</view>
            <view class="xList mt-30"
                  v-if="!allWork">
                <view v-for="(ite, ind) in xList"
                      :key="ind"
                      class="xbox"
                      :class="ite.checked ? 'xchecked' : 'xno'"
                      @click="xcheckde(ind,ite)">
                    <view class="xbox-name">{{ ite.childrenName }}</view>
                    <view class="xbox-tel">{{ ite.telNo }}</view>
                    <view v-if="ite.leave"
                          class="leave_tag">已请假</view>
                </view>
            </view>
        </view>
        <view class="card"
              v-if="currentIndex == 1">
            <view class=" ls-f-ajsb">
                <view class="titl">课后反馈</view>
                <view class="info2">视频最多1个</view>
            </view>
            <view class="input">
                <textarea maxlength="100000"
                          value=""
                          v-model="kehouList[0].text"
                          placeholder="对本节课教学内容、学生上课情况等作出反馈" />
                <!-- <text class="text-length">{{ kehouList[0].text.length }}/1000字</text> -->
            </view>
            <view class="ls-f-ac"
                  style="flex-wrap: wrap;">
                <view class="upload ls-f-ac">
                    <view class="add ls-f-ajc"
                          @click="upload2(0)"
                          v-if="kehouList[0].images.length < kehouList[0].count">+</view>
                </view>
                <view v-for="(data, idx) in kehouList[0].images"
                      :key="idx"
                      class="mt-30">
                    <image src="../../../static/images/common_icon_delete@2x.png"
                           class="del"
                           @click="del(index, idx)"
                           mode=""></image>
                    <image class="img"
                           :src="data"
                           mode="aspectFill"></image>
                </view>
            </view>
        </view>
        <view class="info"
              v-if="currentIndex == 1"
              style="margin-top: 25rpx;">作业布置</view>
        <view class="card"
              v-if="currentIndex == 1">
            <view class=" ls-f-ajsb">
                <view class="titl">作业布置</view>
                <view class="info2">视频最多1个，照片最多8张</view>
            </view>
            <view class="input">
                <textarea value=""
                          maxlength="100000"
                          v-model="kehouList[1].text"
                          placeholder="请填写作业内容" />
                <!-- <text class="text-length">{{ kehouList[1].text.length }}/1000字</text> -->
            </view>
            <view class="ls-f-ac"
                  style="flex-wrap: wrap;">
                <view class="upload ls-f-ac">
                    <view class="add ls-f-ajc"
                          @click="upload2(1)"
                          v-if="kehouList[1].images.length < kehouList[1].count">+</view>
                </view>
                <view v-for="(data, idx) in kehouList[1].images"
                      :key="idx"
                      class="mt-30">
                    <image src="../../../static/images/common_icon_delete@2x.png"
                           class="del"
                           @click="del(index, idx)"
                           mode=""></image>
                    <image class="img"
                           :src="data"
                           mode="aspectFill"></image>
                </view>
            </view>
            <view class="bottom ls-f-ajsb">
                <text>提醒全班学生</text>
                <radio></radio>
            </view>
        </view>
        <view class=""
              style="height: 200rpx;"></view>
        <view class="btn ls-f-ajc">
            <view class="b ls-f-ajc"
                  @click="submit">上传</view>
        </view>
        <u-select v-model="showSchool"
                  label-name="schoolName"
                  :list="schoolList"
                  value-name="schoolId"
                  @confirm="confirmSchool"></u-select>
        <u-select v-model="showCourse"
                  label-name="kkname"
                  :list="courseList"
                  value-name="arr"
                  @confirm="confirmCourse"></u-select>
    </view>
</template>

<script>
import uploadImage from '@/common/ossutil/uploadFile.js';
export default {
    data() {
        return {
            rlist: [{
                name: '是',
                disabled: 1
            },
            {
                name: '否',
                disabled: 0
            },]
            ,
            allWork: 1,
            xList: [],
            arr: {},
            teacher: [],
            school: "",
            schoolId: "",
            course: "",
            courseId: "",
            // course:{
            // 	label: '请选择',
            // 	value: "-1"
            // },
            // school:{
            // 	label: '请选择',
            // 	value: "-1"
            // },
            showSchool: false,
            showCourse: false,
            courseList: [{
                value: '1',
                label: '江'
            },
            {
                value: '2',
                label: '湖'
            }],
            schoolList: [{
                value: '1',
                label: '江'
            },
            {
                value: '2',
                label: '湖'
            }],
            currentIndex: 0,
            kehouList: [
                {
                    count: 99,
                    text: '',
                    images: [],

                },
                {
                    count: 99,
                    text: '',
                    images: [],

                },
            ],
            list: [{
                count: 99,
                text: '课前教室检查',
                info: '视频最多1个，照片最多99张',
                images: [],

            },
            {
                count: 99,
                text: '教室还原',
                info: '视频最多1个，照片最多99张',
                images: [],

            },
            {
                count: 99,
                text: '学生考勤照',
                info: '最多99张',
                images: [],

            }],
            tabs: [{
                name: '校内工作记录'
            },
            {
                name: '课后反馈'
            },
            ],
            currentScheduleLeaveStudentList: [{ childrenId: '164545205087200120' }, { childrenId: '164545281434900120' }],
        }
    },
    methods: {
        radioChange(e) {
            console.log("4433", e)
        },
        xcheckde(index, item) {
            if (item.leave) {
                return this.$interactive.toast('该学生已请假', 1500)
            }
            this.xList[index].checked = !this.xList[index].checked
        },
        getTeacherClassPage() {
            this.$api.teacherClassPage({}, res => {
                console.log('>>>>>>>>>>>>>>>>', res.data)
                if (res.code == 0) {
                    this.courseList = res.data
                    for (var i = 0; i < res.data.length; i++) {
                        this.courseList[i].kkname = res.data[i].productResp.name
                        this.courseList[i].arr = { categoryId: res.data[i].categoryId, categoryName: res.data[i].categoryName, scheduleId: res.data[i].id, productName: res.data[i].productResp.name, schoolId: res.data[i].schoolId, schoolName: res.data[i].schoolName }
                    }
                }
                // 获取完数据收尾
                uni.stopPullDownRefresh();
            });
        },
        del(index, idx) {
            this.list[index].images.splice(idx, 1)
        },
        confirmSchool(e) {
            this.school = e[0].label
            this.schoolId = e[0].value

        },
        confirmCourse(e) {
            this.course = e[0].label
            // this.courseId = e[0].value
            this.arr = e[0].value
            console.log("arrrrr", this.arr.scheduleId)
            this.getListClassSuccessChild(e[0].value.scheduleId)
            // this.course=e[0]
        },
        upload(index) {
            let that = this;
            uni.chooseMedia({
                count: 9,
                success: (res) => {

                    console.log(res);
                    var tempFilePaths = res.tempFiles;
                    console.log("sdhgj", res.tempFiles)
                    for (var i = 0; i < res.tempFiles.length; i++) {

                        uploadImage(res.tempFiles[i].tempFilePath, 'bsm-sdn/', result => {
                            console.log('rrrrrrrr', result);
                            that.list[index].images = that.list[index].images.concat(result)
                            uni.hideLoading();
                        });
                    }

                }
            })
        },
        upload2(index) {
            console.log(111, index, this.kehouList[index])
            let that = this;
            uni.chooseMedia({
                count: 9,
                success: (res) => {

                    console.log(res);
                    var tempFilePaths = res.tempFiles;
                    console.log("sdhgj", res.tempFiles)
                    for (var i = 0; i < res.tempFiles.length; i++) {

                        uploadImage(res.tempFiles[i].tempFilePath, 'bsm-sdn/', result => {
                            console.log('rrrrrrrr', result);
                            that.kehouList[index].images = that.kehouList[index].images.concat(result)
                            uni.hideLoading();
                        });
                    }

                }
            })
        },
        sel(e) {
            this.currentIndex = e

        },
        add() {

        },
        getSchool() {
            this.$api.getschool({}, res => {
                if (res.data.length != 0) {
                    res.data.forEach((ele, index) => {
                        if (ele.schoolId == '0') {
                            res.data.splice(index, 1)
                        }
                    });
                    this.schoolList = res.data

                }
                // this.schoolList = res.data
                console.log(this.schoolList);
            })

        },
        init() {
            this.$api.getTeacherInfo({}, res => {
                console.log(res.data);
                this.teacher = res.data

            })
        },
        getListClassSuccessChild(id) {
            this.$api.getListClassSuccessChild({ classScheduleId: id, pageSize: 1000, pageNum: 1 }, res => {
                console.log("res.data", res.data);
                let xList = res.data.list
                for (var i = 0; i < res.data.list.length; i++) {
                    xList[i].checked = false
                }
                this.xList = xList
                this.getCurrentSchedule(id)

            })
        },
        getCurrentSchedule(id) {
            this.$api.currentSchedule({ id: id }, (res) => {
                console.log("res.data", res.data);
                if (res.code == 0) {
                    if (res.data && res.data.length > 0) {
                        this.xList.filter((ele) => {
                            res.data.filter((ele1, index) => {
                                console.log('childrenId--------------------------', ele.childrenId, ele1.childId);
                                if (ele.childrenId == ele1.childId) {
                                    this.$set(ele, 'leave', true)
                                    return index
                                } else {
                                    return -1
                                }
                            })
                        })
                        console.log('xList', this.xList);
                    }
                }
            })
        },
        submit() {
            if (this.currentIndex == 0) {
                let unWorkStudent = ""
                let unWorkName = ""
                let unWorkTelno = ""
                if (this.allWork) {

                } else {
                    for (var i = 0; i < this.xList.length; i++) {
                        if (this.xList[i].checked) {
                            unWorkStudent += this.xList[i].childrenId + ','
                            unWorkName += this.xList[i].childrenName + ','
                            unWorkTelno += this.xList[i].telNo + ','
                        }
                    }
                    if (unWorkStudent) {
                        unWorkStudent = unWorkStudent.substr(0, unWorkStudent.length - 1)
                        unWorkName = unWorkName.substr(0, unWorkName.length - 1)
                        unWorkTelno = unWorkTelno.substr(0, unWorkTelno.length - 1)
                        // console.log("unWorkStudent",unWorkStudent)
                        // console.log("unWorkName",unWorkName)
                        // console.log("unWorkTelno",unWorkTelno)
                    } else {
                    }
                }
                let beforeClassPic = this.list[0].images.join(",")
                let afterClassPic = this.list[1].images.join(",")
                let checkWork = this.list[2].images.join(",")
                let categoryId = this.courseId
                let categoryName = this.course
                let schoolId = this.schoolId
                let schoolName = this.school
                let allWork = 0
                let userId = this.teacher.id
                let userName = this.teacher.realName
                let data = {
                    "categoryId": this.arr.categoryId,
                    "categoryName": this.arr.categoryName,
                    "productName": this.arr.productName,
                    "scheduleId": this.arr.scheduleId,
                    beforeClassPic,
                    afterClassPic,
                    checkWork,
                    schoolId,
                    schoolName,
                    unWorkStudent,
                    unWorkName,
                    unWorkTelno
                    // allWork,
                    // userId,
                    // userName
                }
                this.$api.addbeforeWork(data, res => {
                    if (res.code == 0) {
                        uni.showToast({
                            title: res.errMsg || "成功",
                            duration: 1500,
                            icon: 'none'
                        });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 1500);

                    }
                    console.log(res);
                })
            } else {
                let afterWorkPic = this.kehouList[0].images.join(",")
                let taskPic = this.kehouList[1].images.join(",")
                let afterWorkRemake = this.kehouList[0].text
                let taskComment = this.kehouList[1].text
                let categoryId = this.courseId
                let categoryName = this.course
                let schoolId = this.schoolId
                let schoolName = this.school
                let data = {
                    "categoryId": this.arr.categoryId,
                    "categoryName": this.arr.categoryName,
                    "productName": this.arr.productName,
                    "scheduleId": this.arr.scheduleId,
                    afterWorkPic,
                    taskPic,
                    afterWorkRemake,
                    taskComment,
                    schoolId,
                    schoolName,
                    // allWork,
                    // userId,
                    // userName
                }
                this.$api.addafterWork(data, res => {
                    if (res.code == 0) {
                        uni.showToast({
                            title: res.errMsg || "成功",
                            duration: 1500,
                            icon: 'none'
                        });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 1500);

                    }
                    console.log(res);
                })
            }

        }
    },
    onLoad() {
        this.getSchool()
        this.getTeacherClassPage();
        this.init();
    }
}
</script>

<style lang="scss" scoped>
.mt-30 {
    margin-top: 32rpx;
    position: relative;
}
.del {
    position: absolute;
    top: 9;
    right: 0;
    width: 40rpx;
    height: 40rpx;
}
.card {
    width: 686rpx;
    padding: 32rpx;
    background: #ffffff;
    opacity: 1;
    margin-top: 32rpx;
    border-radius: 32rpx;
    margin-left: 32rpx;

    .bottom {
        margin-top: 25rpx;
        padding-top: 25rpx;
        border-top: 1rpx solid #eee;
    }
    .img {
        width: 186rpx;
        height: 196rpx;
        border-radius: 12rpx;
        margin-left: 15rpx;
    }
    .upload {
        margin-top: 32rpx;
        flex-wrap: wrap;
        .add {
            width: 196rpx;
            height: 196rpx;
            background-color: #f6f6f6;
            font-size: 60rpx;
            border-radius: 12rpx;
        }
    }
    .input {
        margin-top: 32rpx;
        position: relative;
        .text-length {
            color: #999999;
            font-size: 28rpx;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
    .titl {
        color: #333;
        font-size: 32rpx;
    }
    .info2 {
        color: #cccccc;
        font-size: 28rpx;
    }
}
.btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    padding-top: 10rpx;
    padding-bottom: 40rpx;
    background-color: #fff;
    .b {
        color: #fff;
        font-size: 32rpx;
        width: 684rpx;
        height: 100rpx;
        background: #63b9f2;
        opacity: 1;
        border-radius: 50rpx;
    }
}
.list {
    width: 686rpx;
    margin-left: 32rpx;
    background-color: #fff;
    padding: 34rpx 32rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-top: 32rpx;
    .item {
        padding-bottom: 35rpx;
        margin-top: 30rpx;
        border-bottom: 1rpx solid #eee;
    }
    .img {
        width: 186rpx;
        height: 196rpx;
        border-radius: 12rpx;
        margin-left: 15rpx;
    }
    .upload {
        margin-top: 32rpx;
        flex-wrap: wrap;
        .add {
            width: 196rpx;
            height: 196rpx;
            background-color: #f6f6f6;
            font-size: 60rpx;
            border-radius: 12rpx;
        }
    }

    .titl {
        color: #333;
        font-size: 32rpx;
    }
    .info2 {
        color: #cccccc;
        font-size: 28rpx;
    }
}
.info {
    color: #999999;
    font-size: 24rpx;
    margin-left: 32rpx;
}
.tab {
    margin: 20rpx 0;
}
.hr {
    width: 680rpx;
    height: 2rpx;
    background-color: #f5f5f5;
}
.heard {
    width: 750rpx;
    height: 224rpx;
    background: #ffffff;
    padding: 0 32rpx;
    border-radius: 0px 0px 32rpx 32rpx;
    .item {
        height: 112rpx;
    }
}
.xList {
    display: flex;
    flex-wrap: wrap;
    .xbox {
        position: relative;
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 10rpx;
        .xbox-name {
            font-size: 28rpx;
        }
        .xbox-tel {
            font-size: 24rpx;
        }
        .leave_tag {
            position: absolute;
            right: 0;
            top: 0;
            background: #63b9f2;
            border-radius: 8rpx;
            color: #fff;
            font-size: 24rpx;
            padding: 4rpx 8rpx;
        }
    }
    .xchecked {
        background-color: #63b9f2;
        color: #ffffff;
    }
    .xno {
        background-color: #f5f5f5;
        color: #333333;
    }
}
</style>
